<template>
	<div class="view">
		 <Modal 
        		v-model="data.isShow"
        		width="400">
        		<p slot="header">
	            <span>{{data.actionType == 1?'新建':'编辑'}}职业属性分组</span>
	        </p>
	        
			<Form ref="form" 
				:model="data.data" 
				:rules="ruleValidate" 
				:label-width="80">
		        <Form-item 
		        		label="名称" 
		        		prop="name" 
		        		style="width: 360px;">
		            <Input 
			            	type="text" 
			            	autofocus 
			            	v-model="data.data.name" 
			            	@on-enter="handleSubmit('form')">
		            </Input>
		        </Form-item>
		    </Form>
		    <div slot="footer">
		    		<div class="btns">
			    		<div class="btns-right">
			           	<Button type="primary" 
			           		:loading="data.isSubmit" 
			           		@click="handleSubmit('form')">
			           		确定
			           	</Button>
			            <Button type="ghost" 
			            		:disabled="data.isSubmit" 
			            		@click="handleCancel('form')" 
			            		style="margin-left: 8px">
			            		关闭
			            </Button>
		            	</div>
	            	</div>
	        </div>
	     </Modal>
	</div>

</template>

<script>
	var $this = null;
	
	export default {
		props: ['data'],
		data() {
			return {
				ruleValidate: {
                    name: [
                        { required: true, message: '分组名称不能为空', trigger: 'blur' }
                    ]
                }
			}
		},
		mounted: function() {
		},
		methods: {
			handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                    		this.$emit('on-submit', this.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                });
            },
            handleCancel (name) {
              	this.$emit('on-cancel');
              	this.data.isShow = false;
            }
		}
	}
</script>

<style scoped="scoped">
	.view {
		padding: 20px;
	}
	.btns {
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
	}
	.btns-right {
		flex: 1;
	}
</style>